<template>
  <div class="outbox">
    <!-- 横向柱状图 -->
    <div ref="barChartDOM1" class="outbox-barChartDOM"></div>
    <div ref="barChartDOM2" class="outbox-barChartDOM"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, watch } from 'vue';
import { getProvinceStats } from '@/api/system/EmploymentInfo.js';
const props= defineProps({
  selectedGrade: String
});
const barChartDOM1 = ref(null);
const barChartDOM2 = ref(null);
const chartsData = ref([]); // 存储就业数据
const value = ref('2025届'); // 默认选择的年级
const options = ref([]); // 存储获取到的年级数据
let barChart1;
let barChart2;

// 初始化横向柱状图
const initBarChart = (dom, data) => {
  const barChart = echarts.init(dom);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    title: {
      left: 'center',
      top: '5%',
      textStyle: {
        fontSize: 12,
        fontWeight: 'bold',
        color: '#000',
      },
    },
    xAxis: {
      type: 'category',
      data: data.map((item) => item.name),
      name: '类别', // X轴名称
      nameLocation: 'end', // 将名称显示在轴的末端
      nameGap: 30, // 名称与轴线之间的距离
      nameTextStyle: {
        color: '#fff', // 设置 x 轴名称颜色
        fontSize: 16, // 设置 x 轴名称字体大小
        fontWeight: 'bold', // 设置 x 轴名称字体加粗
      },
      axisLabel: {
        color: '#fff', // 设置 x 轴标签颜色
        interval: 0, // 设置刻度标签的显示间隔
        rotate: 45, // 设置坐标轴标签旋转角度
      },
      axisLine: {
        lineStyle: {
          color: '#fff' // 设置轴线颜色
        }
      },
    },
    yAxis: {
      type: 'value',
      nameTextStyle: { 
        color: '#fff', 
        fontSize: 12,  
        fontWeight: 'bold', 
        lineHeight: 20,
      },
      axisLine: {
        lineStyle: {
          lineHeight: 20,
          color: '#fff'
        }
      },
      axisLabel: {
        color: '#fff', 
        interval: 0, 
        rotate: 45,
      }
    },
    series: [
      {
        data: data.map((item) => item.value),
        type: 'bar',
        itemStyle: {
          color: function(params) {
        // params 是当前柱子的数据和索引信息
        // params.dataIndex 是当前柱子的索引
        // 根据索引返回不同的颜色
        const colors = [
          "#37a2da",
          "#32c5e9",
          "#67e0e3",
          "#9fe6b8",
          "#ffdb5c",
          "#ff9f7f",
          "#fb7293",
        ];
        return colors[params.dataIndex % colors.length];
      },
        },
        label: {
          show: false,  //24.12.05zyc 更改，关闭标签在顶部显示，否则显得很乱
          position: 'none', // 将标签显示在柱状图的顶部
          color: '#fff',
          formatter: '{b}' // 使用数据的名称作为标签内容
        },
      },
    ],
  };
  barChart.setOption(option);
  return barChart; // 返回实例
};


onMounted(() => {
  window.addEventListener('resize', resizeCharts); // 监听窗口大小变化
  getProvinceStats().then(res => {
    options.value = res.rows.map((item) => item.name);
    chartsData.value = res.rows.map((item) => ({
      name: item.name,
      value: item.value || [],
    }));

    // 找到'2021级'对应的数据
    const initialData = chartsData.value.find((item) => item.name === '2025届');
    if (initialData) {
      // 将数据中的null值进行更改
      initialData.value = initialData.value.map((item) => {
        if (item.name === null || item.name === '') {
          return { ...item, name: '未跟踪' };
        }
        return item;
      });

      // 计算中间索引，将数据分为前一半和后一半
      const middleIndex = initialData.value.length / 2;

      // 获取前一半数据
      const firstHalfData = initialData.value.slice(0, Math.ceil(middleIndex));

      // 获取后一半数据
      const secondHalfData = initialData.value.slice(Math.ceil(middleIndex));

      // 初始化两个图表
      barChart1 = initBarChart(barChartDOM1.value, firstHalfData);
      barChart2 = initBarChart(barChartDOM2.value, secondHalfData);
    }
  });
});

// 处理图表自适应
const resizeCharts = () => {
  if (barChart1) barChart1.resize();
  if (barChart2) barChart2.resize();
};
// 更新图表数据// 更新图表数据
const updateChartData = (selectedGrade) => {
  const selectData = chartsData.value.find((item) => item.name === selectedGrade);
  if (selectData) {
    selectData.value = selectData.value.map((item) => {
      if (item.name === null) {
        return { ...item, name: '未跟踪' };
      }
      return item;
    });

    // 重新分割数据
    const middleIndex = selectData.value.length / 2;
    const firstHalfData = selectData.value.slice(0, Math.ceil(middleIndex));
    const secondHalfData = selectData.value.slice(Math.ceil(middleIndex));

    // 更新两个图表
    if (barChart1) {
      barChart1.setOption({
        xAxis: { data: firstHalfData.map((item) => item.name) },
        series: [{ data: firstHalfData.map((item) => item.value) }],
      });
    }
    if (barChart2) {
      barChart2.setOption({
        xAxis: { data: secondHalfData.map((item) => item.name) },
        series: [{ data: secondHalfData.map((item) => item.value) }],
      });
    }
  }};


watch(() => props.selectedGrade, (newVal) => {
  if (newVal) {
    // console.log('选择的年级更改了');
    updateChartData(newVal);
  }
});

</script>

<style lang="scss" scoped>
.outbox {
  height: 87vh;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: space-around;
  width: 100%;
  // margin-right: 300px;
  // align-content: space-around;
}
.outbox-barChartDOM {
  
  width: 100%; // 确保柱状图宽度正确
  height: 40%; // 确保柱状图高度正确
  border: 3px solid #37a2da;
  //  clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 25% 100%, 25% 75%, 0 75%); /* 不规则形状 */
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
animation: borderPulse 1.5s infinite;

@keyframes borderPulse {
  0% {
    border-color: #37a2da;
  }
  50% {
    border-color: #67e0e3;
  }
  100% {
    border-color: #249bdb;
  }
}
}
</style>